<div class="tlp-framed-vertically">
    <h1 class="tlp-framed-horizontally">{{ public_name }}</h1>

    <nav class="tlp-tabs">
        <a href="/admin/groupedit.php?group_id={{ id }}" class="tlp-tab">{{ information_label }}</a>
        <a href="/admin/userlist.php?group_id={{ id }}" class="tlp-tab">{{ members_label }}</a>
        <a href="/admin/projecthistory.php?group_id={{ id }}" class="tlp-tab tlp-tab-active">{{ history_label }}</a>
        {{# is_active }}
            <a href="/admin/show_pending_documents.php?group_id={{ id }}" class="tlp-tab">{{ pending_label }}</a>
        {{/ is_active }}
    </nav>

    <div class="tlp-framed-horizontally" id="siteadmin-project-history">
        <section class="tlp-pane" id="siteadmin-project-history-filter">
            <form action="?" method="GET" class="tlp-pane-container" id="siteadmin-project-history-filter-form">
                <input type="hidden" name="group_id" value="{{ id }}">
                <div class="tlp-pane-header">
                    <h1 class="tlp-pane-title">
                        <i class="fa fa-search tlp-pane-title-icon"></i> {{ filter_label }}
                    </h1>
                </div>
                <section class="tlp-pane-section">
                    {{# search }}
                        <div class="tlp-form-element">
                            <label class="tlp-label" for="siteadmin-project-history-events">{{ event_label }}</label>
                            <select class="tlp-select"
                                    name="events_box"
                                    id="siteadmin-project-history-events"
                            >
                                {{# events }}
                                    <option value="{{ key }}"
                                            {{# is_current }}selected{{/ is_current }}
                                            data-target="subevents-{{ key }}"
                                    >
                                        {{ label }}
                                    </option>
                                {{/ events }}
                            </select>
                            {{# grouped_events }}
                                <div class="siteadmin-project-history-filter-form-subevents" id="subevents-{{ group }}">
                                    <select class="tlp-select"
                                            name="sub_events_box[]"
                                            style="width: 100%"
                                            multiple
                                            disabled
                                            data-placeholder="{{ event_placeholder }}"
                                    >
                                        {{# events }}
                                            <option value="{{ key }}"
                                                    {{# is_current }}selected{{/ is_current }}
                                                    data-target="subevents-{{ key }}"
                                            >
                                                {{ label }}
                                            </option>
                                        {{/ events }}
                                    </select>
                                </div>
                            {{/ grouped_events }}
                        </div>
                        <div class="tlp-form-element">
                            <label for="siteadmin-project-history-value" class="tlp-label">{{ value_label }}</label>
                            <input type="text"
                                   class="tlp-input"
                                   id="siteadmin-project-history-value"
                                   name="value"
                                   value="{{ selected_value }}"
                                   placeholder="{{ value_label }}">
                        </div>
                        <div class="tlp-form-element">
                            <label for="siteadmin-project-history-date-picker-from" class="tlp-label">{{ from_label }}</label>
                            <div class="tlp-form-element tlp-form-element-prepend">
                                <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                                <input type="text"
                                       id="siteadmin-project-history-date-picker-from"
                                       class="tlp-input tlp-input-date"
                                       size="11"
                                       name="start"
                                       value="{{ selected_from }}"
                                >
                            </div>
                        </div>
                        <div class="tlp-form-element">
                            <label for="siteadmin-project-history-date-picker-to" class="tlp-label">{{ to_label }}</label>
                            <div class="tlp-form-element tlp-form-element-prepend">
                                <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                                <input type="text"
                                       id="siteadmin-project-history-date-picker-to"
                                       class="tlp-input tlp-input-date"
                                       size="11"
                                       name="end"
                                       value="{{ selected_to }}"
                                >
                            </div>
                        </div>
                        <div class="tlp-form-element">
                            <label class="tlp-label" for="siteadmin-project-history-by">{{ by_label }}</label>
                            <div class="tlp-form-element tlp-form-element-prepend">
                                <span class="tlp-prepend"><i class="fa fa-user"></i></span>
                                <select class="tlp-select"
                                       id="siteadmin-project-history-by"
                                       name="by"
                                       data-placeholder="Paul">
                                    {{# selected_by }}
                                        <option value="{{ selected_by }}">{{ selected_by }}</option>
                                    {{/ selected_by }}
                                </select>
                            </div>
                        </div>
                    {{/ search }}
                    <button type="submit" class="tlp-button-primary tlp-button-wide">
                        <i class="fa fa-search tlp-button-icon"></i> {{ search_label }}
                    </button>
                </section>
            </form>
        </section>

        <section class="tlp-pane" id="siteadmin-project-history-results">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <h1 class="tlp-pane-title">
                        {{ change_label }}
                    </h1>
                </div>
                <section class="tlp-pane-section">
                    <table class="tlp-table">
                        <thead>
                            <tr>
                                <th class="siteadmin-project-history-results-event">{{ event_label }}</th>
                                <th class="siteadmin-project-history-results-value">{{ value_label }}</th>
                                <th class="siteadmin-project-history-results-date">{{ date_label }}</th>
                                <th class="siteadmin-project-history-results-user">{{ user_label }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{# history }}
                                <tr>
                                    <td class="siteadmin-project-history-results-event">{{ event }}</td>
                                    <td class="siteadmin-project-history-results-value">{{ value }}</td>
                                    <td class="siteadmin-project-history-results-date">{{ date }}</td>
                                    <td class="siteadmin-project-history-results-user">
                                        {{# user }}
                                            {{# is_none }}
                                                {{ display_name }}
                                            {{/ is_none }}
                                            {{^ is_none }}
                                            <a href="/admin/usergroup.php?user_id={{ id }}">
                                                {{ display_name }}
                                            </a>
                                            {{/ is_none }}
                                        {{/ user }}
                                    </td>
                                </tr>
                            {{/ history }}
                            {{^ history }}
                                <tr>
                                    <td colspan="4" class="tlp-table-cell-empty">
                                        {{# search }}
                                            {{# user_has_searched_for_something }}
                                                {{ empty_results }}
                                            {{/ user_has_searched_for_something }}
                                            {{^ user_has_searched_for_something }}
                                                {{ empty_state }}
                                            {{/ user_has_searched_for_something }}
                                        {{/ search }}
                                    </td>
                                </tr>
                            {{/ history }}
                        </tbody>
                    </table>

                    {{# pagination }}
                        {{> pagination }}
                    {{/ pagination }}
                </section>
            </div>
        </section>
    </div>
</div>
